<script lang="ts">
export default {
  name: "wxPay",
}
</script>
<template>
<div>
  <img :src="qrCodeUrl" alt="">
</div>
</template>
<script lang="ts" setup>
import QRCode from 'qrcode';
import {onMounted, ref} from "vue";

const qrCodeUrl = ref('');
const props = defineProps({
  code_url: {
    type: String,
    default: ""
  }
})

const generateQRCode = async () => {
  let data = props.code_url;
  try {
    qrCodeUrl.value = await QRCode.toDataURL(data, {
      width: 180,
      margin: 2,
      color: {
        dark: '#000000ff',
        light: '#ffffffff'
      }
    })
  } catch (err) {
    console.error('生成二维码失败:', err)
  }
}

onMounted(()=>{
  generateQRCode()
})

</script>
<style scoped lang="scss">

</style>